<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .navbox{
            width: 600px;
            height: 100px;
            overflow: hidden;
            border: 10px red solid;
            text-align: center;
            margin: auto;
           
        }
        .title{
         
            text-align: center;
          
            display: inline-block;
        }

        .right{
            float: right;
            
        }
        .left{
            float: left;
        }
        .navbox a{ 
            
            display: block;
            height: 100%;
            line-height: 100px;
            font-size: 30px;
            
        }
        .navbox a:hover{
            color: aqua;
        }
        .content{
          
           text-align: center;
            margin: auto;
        }
        .content img{
            border: 10px blue solid;
            max-width: 600px;
        }
        
    </style>
</head>
<body>
    <h1 style="text-align: center;">浮动二</h1>
    <div class="contanier">
        <div class="navbox">
            <a href="#" class="left">上一章</a>
            <a href="#" class="right">下一章</a>
            <h1 class="title">西游记</h1>
        </div>
        <div class="content">
            <img src="./image/西游记.webp" alt="">
        </div>
    </div>
</body>
</html>